<template>
  <el-row class="elrow">
    <el-col :span="5">
      <img :src="headimgleft" class="headimgleft" />
    </el-col>
    <el-col :span="14" class="elcol14">
      <div class="headTitle">
        <h1><em>欢迎您</em>...</h1>
        <p>本网站主要负责介绍国内的传统节日.</p>
        <p class="included">
          目前已收录：<em class="includedtxt"
            >春节,元宵节,端午节,清明节,中秋节,中元节, 重阳节,七夕,冬至</em
          >.
        </p>
      </div>
    </el-col>
    <el-col :span="5" class="elcol5">
      <img :src="headimgright" class="headimgright" />
    </el-col>
  </el-row>
</template>

<script >
export default {
  name: "Header",
  components: {},
  data() {
    return {
      headimgleft: require("../assets/Img/headImg-left.png"),
      headimgright: require("../assets/Img/headImg-right.gif"),
    };
  },
};
</script>

<style scoped>
.headimgleft {
  width: 100px;
  padding: 0px;
  margin-left: -1px;
  margin-top: -1px;
}
.headimgright {
  padding: 0px;
  /* margin-left: 180px; */
  margin-top: 1px;
  float: right;
}
.elcol5 {
  height: 280px;
}
.elrow {
  display: flex;
  height: 280px;
}
.elcol14 {
  height: 280px;
  border-bottom: 2px solid rgb(121, 116, 116);
}
.headTitle {
  padding-top: 80px;
  text-align: center;
}
.included {
  font-size: 12px;
  padding-left: 80px;
}
.includedtxt {
  color: red;
}
</style>